<template>
  <div class="history">
     <section>
         <span>历史记录</span>
         <span style="color:red" @click="$store.commit('delectAll')">全部删除</span>
     </section>
     <ul>
         <li v-for="(item,index) in $store.state.history" :key="index" @click="$emit('checkItem',item)">{{item}} <van-icon name="cross" @click.stop="$store.commit('delectOne',index)"/></li>
     </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {},
};
</script>
<style lang="scss" scoped>
 section{
   display: flex;
   height: 50px;
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
 }
 ul{
     padding: 0 10px;
     display: flex;
     flex-wrap: wrap;
     li{
         padding: 4px 10px;
         border-radius: 5px;
         border:1px solid #ccc;
         margin-right: 10px;
         margin-bottom: 10px;
     }
 }
</style>